<template>
    <div class="standard">
        <pub-head isBorder="true"></pub-head>

        <!-- 头部 -->
        <div class="head ali-c flex">
            <router-link :to="'/'">首页 ></router-link>
            <router-link :to="'/aptitude'">&nbsp;资质服务 ></router-link>
            <span class="blue-c">&nbsp;资质标准</span>
        </div>

        <!-- 列表 -->
        <div class="standard-box flex">
            <!-- 一级菜单 -->
            <div class="standard-box-left">
                <ul class="standard-left-lists flexv">
                    <li class="standard-left-list"
                        :class="{'on': article_id == item.id}"
                        v-for="(item,index) in infos"
                        :key="index"
                        @click="selecte(item.id)"
                        >{{item.name}}
                    </li>
                </ul>
            </div>

            <!-- 二级菜单 -->
            <div class="standard-box-right flex1">
                <ul class="standard-right-lists flexv" >
                    <van-collapse v-model="activeNames">
                        <van-collapse-item
                            :title="title.name"
                            :name="title.id"
                            v-for="title in lists"
                            :key="title.id"
                            class="flex flex-wrap standard-right-list"
                            :disabled="title.childs.length <=0"
                            >
                            <router-link :to="'/standardList/' + child.id" v-for="child in title.childs" :key="child.id">{{child.name}}</router-link>
                        </van-collapse-item>
                    </van-collapse>
                </ul>
            </div>
        </div>

        <div class="foot-space"></div>
        <pub-foot index="true"></pub-foot>
    </div>
</template>
<script>
import Vue from 'vue';
import { mapState } from 'vuex';
import pubHead from '@/components/head'
import pubFoot from '@/components/foot'
import { Toast, Area, Popup,Collapse, CollapseItem } from 'vant';

Vue.use(Area).use(Popup).use(Collapse).use(CollapseItem);
export default {
    data(){
        return{
            infos: [], // 一级分类列表
            lists: [], // 二级分类列表
            childs: [], // 三级分类列表
            article_id: '62', // 默认选中的一级分类
            activeNames: [],
        }
    },
    created(){
    },
    components: {
        pubHead,
        pubFoot,
        'van-popup': Popup,
        'van-collapse': Collapse,
        'van-collapse-item': CollapseItem,
    },
    computed: {
        ...mapState(['user'])
    },
    watch: {
    },
    created(){
        this.getData()
    },
    methods: {
        // 获取数据
        getData(){
            this.axios.get('http://jxjq.0791jr.com/index.php?m=App&c=Handle&a=standard', {
                params: {
                    uid: this.$store.state.user.uid,
                    cate_id: this.$route.params.id,
                    // article_id: this.article_id
                }
            }).then(res => {
                if (res.data.code == 200) {
                    const data = res.data.data;
                    this.infos = data.info;
                    this.lists = data.list;
                }
            })
        },
        // 选择一级菜单
        selecte(val){
            this.article_id = val;
            this.axios.get('http://jxjq.0791jr.com/index.php?m=App&c=Handle&a=standard', {
                params: {
                    uid: this.$store.state.user.uid,
                    cate_id: this.$route.params.id,
                    article_id: val
                }
            }).then(res => {
                if (res.data.code == 200) {
                    const data = res.data.data;
                    this.infos = data.info;
                    this.lists = data.list;
                }
            })
        }
    }
}
</script>
<style lang="less" scoped>
.standard{
    min-height: 100vh;
    background-color: #f5f5f5;
    // 头部
    .head {
        height: 0.8rem;
        padding: 0 0.24rem;
        font-size: 0.28rem;
        line-height: 120%;
        a,span{
            color: #999;
            font-weight: bold;
        }
    }
    // 列表
    .standard-box{
        width: 100%;
        height: calc(100vh - 2.9rem);
        .standard-box-left{
            width: 1.95rem;
            height: 100%;
            overflow: hidden;
            .standard-left-lists{
                .standard-left-list{
                    width: 100%;
                    height: 0.65rem;
                    padding-left: 0.26rem;
                    border-left: 0.06rem solid #ebebeb;
                    border-bottom: 0.04rem solid #fff;
                    font-size: 0.28rem;
                    line-height: 0.65rem;
                    font-weight: bold;
                    color: #333;
                    background-color: #ebebeb;
                }
                .standard-left-list:last-child{
                    border-bottom: none;
                }
                .on{
                    border-bottom-color: #f5f5f5;
                    background-color: #f5f5f5;
                    border-left-color: #1f78ff;
                    color: #1f78ff;
                }
            }
        }
        .standard-box-right{
            height: 100%;
            overflow: hidden;
            .standard-right-lists{
                width: 100%;
                height:auto;
                padding: 0 0.24rem;
                .standard-right-list {
                    width: 100%;
                    min-height: 0.74rem;
                    margin-bottom: 0.2rem;
                    border-radius: 0.14rem;
                    background-color: #fff;
                }
            }

        }
    }
    // 底部占位符
    .foot-space{
        width: 100%;
        height: 0.98rem;
        margin-top: 0.2rem;
    }
}
</style>
<style lang="less">
.standard {
    .van-cell,.van-collapse-item__content{
        background-color: transparent;
    }
    .van-cell:not(:last-child)::after{
        display:none;   
    }
    .van-icon {
        display: none;
    }
    .van-cell__title{
        font-size: 0.28rem;
        font-weight: bold;
    }
    .van-collapse-item__content{
        display: flex;
        flex-wrap: wrap;
    }
    .van-collapse-item__content a{
        width: 50%;
        height: 0.5rem;
        font-size: 0.26rem;
        line-height: 0.5rem;
        color: #9e9e9e;
    }
    .van-collapse-item__title--disabled, .van-collapse-item__title--disabled .van-cell__right-icon{
        color: #777;
    }
}
</style>
